import React from 'react';
import Counter from './Counter';
import FriendListItem from './FriendListItem';
import FriendStatus from './FriendStatus';
import ChatRecipientPicker from './ChatRecipientPicker';

const friendList = [
  { id: 1, name: 'Phoebe' },
  { id: 2, name: 'Rachel' },
  { id: 3, name: 'Ross' },
];

// Hook 本质就是 JavaScript 函数，但是在使用它时需要遵循两条规则：
// 只在最顶层使用 Hook（不要在循环，条件或嵌套函数中调用 Hook，因为其执行机制是按顺序执行的）
// 只在 React 函数 或 自定义 Hook 中调用 Hook

export default class HookSample extends React.Component {
  render() {
    return (
      <div>
        简单例子:
        <Counter />
        <br/>-------------------------------<br/>
        自定义hook:
        <div>FriendStatus: <FriendStatus friend={friendList[0]} /></div>
        <ul>
          {
            friendList.map(item => {
              return <FriendListItem key={item.id} friend={item}></FriendListItem>;
            })
          }
        </ul>
        <br/>-------------------------------<br/>
        多个hook之间传递数据：
        <ChatRecipientPicker list={friendList} />
      </div>
    );
  }
}